<template>
	<div class="order">
		<div v-show="!isDetail">
			<div class="ipt-warrp">
				<div class="ipt-item">
					<p class="title">订单编号</p>
					<el-input v-model="orderNum" placeholder="请输入订单编号"></el-input>
				</div>			
				<div class="ipt-item">
					<p class="title">买家昵称</p>
					<el-input v-model="nickName" placeholder="请输入买家昵称"></el-input>
				</div>			
				<div class="ipt-item">
					<p class="title">商品名称</p>
					<el-input v-model="goodsName" placeholder="请输入商品名称"></el-input>
				</div>			
				<div class="ipt-item">
					<p class="title"></p>
					<div class="btn" @click="searchOrder">搜索</div>
				</div>
			</div>
			<div class="time-warrp">
				<span class="time-title">下单时间</span>
				<span class="time-btn" :class="{'time-active':currentTime==7}" @click="byOrderTime(7)">最近7日</span>
				<span class="time-btn" :class="{'time-active':currentTime==15}" @click="byOrderTime(15)">最近15日</span>
				<span class="time-btn" :class="{'time-active':currentTime==30}" @click="byOrderTime(30)">最近30日</span>
				<el-date-picker
			      v-model="value6"
			      @change="byOrderTime(value6)"
			      type="daterange"
			      value-format="timestamp"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			</div>
			<div class="content">
				<div class="order-by">
					<span class="order-item" 
						  :class="{'active':index === current}" 
						  v-for="(item,index) in orderMenu"
						  @click="orderQuery(index,item.statu)"
						  >
						{{item.name}}
					</span>
				</div>
				<div class="down-warrp">
					<div class="left-btn" :class="{'lactive':selectArr.length}" @click="sendGoods">发货</div>
					<!-- <div class="right-btn">下载表格</div>  -->
				</div>
 			 	<el-table
 			 		v-loading="loading"
					@selection-change="handleSelectionChange"
					:data="orderList"
				    style="width: 100%">
 				    <el-table-column type="expand">
 				      <template slot-scope="props">
 			      		<div class="goods-info" v-for="item in props.row.goods">
				        	<div class="buy-img" style="height: 80px;width: 80px;">
				        		<img :src="item.img_path" width="100%">
				        	</div>
				        	<div class="goods-name">
				        		{{item.name}}
				        	</div>
				        	<div class="info-name">
				        		
				        	</div>
				        	<div class="info-desc">
				        		<p>￥{{item.price}}/{{item.quantity}}</p>
				        	</div>
				        </div> 
				      </template> 
				    </el-table-column>
					<el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				    <el-table-column
				    :show-overflow-tooltip="true"
				      prop="goodsNames"
				      label="商品"
					>
				    </el-table-column>
				    <el-table-column
				      prop="goods"
				      label="单价/数量"
				      width="130"
				      :row-style="'text-align:right'">
						<template slot-scope="scope">
			                <div v-for='v in scope.row.goods'>￥{{v.price | moneyFormat}}/{{v.quantity}}</div>
			            </template>
				    </el-table-column>			    
				    <el-table-column
				      prop="total_price"
				      label="总金额"
				      :row-style="'text-align:right'">
				    </el-table-column>			    
				    <el-table-column
				      prop="userZhname"
				      label="买家昵称"
				      :row-style="'text-align:right'">
				    </el-table-column>			   
				    <el-table-column
				      label="交易状态"
				      :row-style="'text-align:right'">
				        <template slot-scope="scope">
					     {{scope.row.status | status}}
					  </template>
				    </el-table-column>		    
				    <el-table-column
				      label="操作"
				      :row-style="'text-align:right'">
				      <template slot-scope="scope">
				      		<el-popover
							  placement="bottom"
							  width="220"
							  trigger="hover"
							  v-show="scope.row.status === 1"							 
							  >
					 		  <p style="line-height: 24px;">{{scope.row.delivery_name}}</p>
							  <p style="line-height: 24px;">{{scope.row.delivery_address}}</p>
							  <p style="line-height: 24px;">{{scope.row.delivery_phone}}</p>
							  <p style="line-height: 24px;">运单号</p>
							  <el-input size="mini" v-model="wayBill" placeholder="请输入运单号" style="margin-bottom: 8px;"></el-input> 
							  <p class="op-btn" slot="reference">发货</p>
					 		  <el-button size="mini" type="primary" @click="sendGood(scope.row.order_id)">确定</el-button>		  
							</el-popover>
				      		<p class="op-btn" @click="goDetail(orderList[scope.$index])">查看订单</p>
				      </template>
				    </el-table-column>
			  </el-table> 
			  <div style="margin: 10px 0;">
				  <el-pagination
				  	  style=""
					  :page-size="pageSize"
					  layout="prev, pager, next"
					  :total="totalPage"
					  :current-page.sync="currentPage"
					  @current-change="goPage"
					 >
					</el-pagination> 
				</div>
			</div>
		</div>	
		<!-- 订单详情 -->
		<div class="order-detail" v-show="isDetail">
			<el-form label-position="left" inline class="demo-table-expand">
	          <el-form-item label="订单编号">
	            <span>{{itemOrder.order_id}}</span>
	          </el-form-item>	          
	          <el-form-item label="成交时间">
	            <span>{{itemOrder.order_id}}</span>
	          </el-form-item>	
        	</el-form>
        	<el-form label-position="left" inline>
	        	<el-form-item label="订单总价">
		            <span>￥{{itemOrder.total_price}}(运费 ￥{{itemOrder.express_fee}})</span>
		         </el-form-item>	
	        </el-form>        	
	        <el-form label-position="left" inline>
	        	<el-form-item>
		            <span>{{itemOrder.status | status}}</span>
		         </el-form-item>	
	        </el-form>
	        <p class="title">商品信息</p>
	        <div class="goods-info" v-for="item in itemOrder.goods">	        	
	        	<div class="goods-img">
	        		<img :src="item.img_path" width="100%">
	        	</div>
	        	<div class="info-desc">
	        		<el-form  label-width="80px">
					  <el-form-item label="商品名称">
					  	<span>{{item.goods_name}}</span>
					  </el-form-item>
					  <el-form-item label="商品单价">
					    <span>{{item.price}}</span>
					  </el-form-item>
					  <el-form-item label="购买数量">
					  	<span>{{item.quantity}}</span>
					  </el-form-item>	  
					  <el-form-item label="实收金额">
					  	<span>{{item.discount_price}}</span>
					  </el-form-item>
					</el-form>
	        	</div>	        	
	        </div>
	        <p class="title">买家信息</p>
	       	<div class="goods-info">
	        	<div class="buy-img">
	        		<img :src="itemOrder.avatar" width="100%">
	        	</div>
	        	<div class="info-desc">
	        		<el-form  label-width="80px">
					  <el-form-item label="微信昵称">
					  	<span>{{itemOrder.userZhname}}</span>
					  	<span style="color: #ccc;cursor: pointer;" @click="isDetail = false">查看历史订单</span>
					  </el-form-item>
					  <el-form-item label="收获地址">
					    <span>{{itemOrder.delivery_address}}</span>
					  </el-form-item>
					</el-form>
	        	</div>
	        </div>
	        <div class="fahuo-btn">
   	        			<el-popover
							placement="bottom"
							width="220"
							trigger="click"
							v-model="showPopover2"
							>
							<p style="line-height: 24px;">{{itemOrder.delivery_name}}</p>
							<p style="line-height: 24px;">{{itemOrder.delivery_address}}</p>
							<p style="line-height: 24px;">{{itemOrder.delivery_phone}}</p>
							<p style="line-height: 24px;">运单号</p>
							<el-input size="mini" v-model="wayBill" placeholder="请输入运单号" style="margin-bottom: 8px;"></el-input>
							<el-button type="primary" v-show="itemOrder.status === 1" slot="reference">发货</el-button>
							<el-button size="mini" type="primary" @click.stop="sendGood(itemOrder.order_id)">确定</el-button>
							<el-button size="mini" @click="showPopover2 = false">取消</el-button>
						</el-popover>    
	        			<el-button @click="isDetail = false">返回</el-button>
	        </div>
		</div>
		<!-- 弹出框 -->
		<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
		  <el-table :data="selectArr">
		    <el-table-column property="goods" label="日期" width="150">
    			<template slot-scope="scope">
	                <div v-for='v in scope.row.goods'>
	                	<div style="height: 60px;width: 60px;overflow: hidden;">
    						<img :src="v.img_path" width="100%">
    					</div>
	            	</div>
	            </template>    
		    </el-table-column>
		    <el-table-column property="goods" label="">
		    	<template slot-scope="scope">
	                <div v-for='v in scope.row.goods'>
	               	 	{{v.price}}/{{v.quantity}}
	            	</div>
	            </template>
		    </el-table-column>
		    <el-table-column property="delivery_address" label="地址"></el-table-column>
		  </el-table>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogTableVisible = false">取 消</el-button>
		    <el-button type="primary" @click="submitOrders">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>
<script>
	import {getCookie} from '../../../../assets/js/cookie.js'
	export default{
		name : 'Order',
		data (){
			return{
				loading : true,
				dialogTableVisible : false,
				isDetail  : false,
				selectArr : [],
				orderNum  : '',//订单编号
				nickName  : '',//买家昵称
				goodsName : '',//商品名称
				orderTime : '',
				value6    : '',
				orderMenu : [
					{
						name  : '全部订单',
						statu : 'all'
					},					
					{
						name  : '待发货',
						statu : 1
					},					
					{
						name  : '已发货',
						statu : 2
					},					
					{
						name  : '维权中',
						statu : 1
					},					
					{
						name  : '维权完成',
						statu : 1
					}
				],
				showPopover: false,
				showPopover2: false,
				currentPage: 1,
				totalPage : 1,
				current : 0,
				pageSize : 5,
				orderList : [],
				itemOrder : '',
				wayBill   : '', //运单号
				type      : 'all',	//订单类型
				currentTime   : 7
			}
		},
		props:['data'],
		mounted(){
			this.uid     = getCookie('UID')
			this.token   = getCookie('TOKEN')
			this.shop_id = this.data.id
			this.getOrderInfo(1)
		},
		filters:{
			status(value){
				if(value == 0){
					return value = '待付款'
				}			
				if(value == 1){
					return value = '待发货'
				}				
				if(value == 2){
					return value = '已发货'
				}				
				if(value == 3){
					return value = '已收货'
				}				
				if(value == 4){
					return value = '已评价'
				}				
				if(value == 5){
					return value = '退换完成'
				}
			}
		},
		methods:{
			getOrderInfo(page,day){
				this.info = {
					day 	   : this.currentTime,
					userZhname : this.nickName,
					goodsname  : this.goodsName,
					status     : this.type,
					order_id   : this.orderNum,
					start      : '',
					end        : ''
				}
				if(day instanceof Array){
					this.info.start = day[0]
					this.info.end   = day[1]
					this.info.day   = ''
				}
				let url = '/platform/vdo/order.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id+'&limit='+this.pageSize+'&page='+this.currentPage
				this.loading   = true
				this.$axiosPost(url,this.info,true).then( res => {
					if(res.code === 200){
						this.orderList = res.data
						this.totalPage = res.count || 1
						this.loading   = false
						console.log(this.totalPage)
					}
					if(res.code === 404){
						this.$message('暂时没有数据');
					}
				})
			},
			byOrderTime(time){	
				this.currentPage = 1
				this.currentTime = time	
				this.getOrderInfo()
			},
			orderQuery(index,type){
				this.current = index
				this.type = type
				this.currentPage = 1
				this.getOrderInfo()
			},
			//点击选择框
			handleSelectionChange(val){
				 this.selectArr = val
			},
			//批量发货
			sendGoods(){
				if(!this.selectArr.length){
					return
				}
				let tag = false
				this.selectArr.forEach( item => {
					if(item.status != 1){
						this.$message({message:'您的商品已发货',type:'warning'})
						tag = true
					}
				})
				if(!tag){
					this.dialogTableVisible = true
				}
				
			},
			sendGood(order){
				if(!this.wayBill){
					this.$message({ message: '请输入运单号',type: 'warning'})
			        return
				}
				let info = {
					uid : this.uid,
					token : this.token,
					shop_id : this.shop_id,
					order_id : order,
					delivery_no : this.wayBill
				}
				this.$axiosGet('/platform/vdo/send.json',info,true).then( res => {
					if(res.code === 200){
						this.$message({message: '发货完成',type: 'success'})
					}
					if(res.code === 404){
						this.$message({message: '发货失败',type: 'error'})
					}
				})
				this.showPopover = false
			},
			//显示订单详情页
			goDetail(item){
				this.itemOrder = item
				this.isDetail = true
			},
			goPage(val){
				this.currentPage = val
				this.getOrderInfo()
			},
			searchOrder(){
				if(!this.orderNum && !this.nickName && !this.goodsName){
					this.$message({
			          message: '请输入查询内容',
			          type: 'warning'
			        });
			        return
				}
				// let info = this.info
				// info.userZhname = this.nickName
				// info.goodsname  = this.goodsName
				// info.order_id   = this.orderNum
				this.getOrderInfo()
			},
			//批量发货
			submitOrders(){
				let ids = []
				this.selectArr.forEach( item => {
					ids.push(item.order_id)
				})
				let url = `/platform/vdo/batchdelivery.json?uid=${this.uid}&token=${this.token}`
				this.$axiosPost(url,{ids:ids,shop_id:this.shop_id},true).then( res => {
					this.dialogTableVisible = false
					if(res.code === 200){
						this.getOrderInfo()						
						this.$message({message:'发货成功',type:'success'})
					}
					if(res.code === 404){
						this.$message({message:'发货失败',type:'error'})
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
@activeColor:#8da7d0;
.order /deep/ .el-input__inner{
	width: 200px;
	height: 34px;
}
.order /deep/ .el-date-editor{
	width: 240px;
	height: 38px;
	margin-left: -1px;
	border-radius: 0;
	vertical-align: top;
}
.order /deep/ .el-form{
	height: 28px;
}.order /deep/ .el-form-item{
	margin-bottom: 0;
}
	.order{
		width: 90%;
		margin: 0 auto;
		text-align: left;
		.ipt-warrp{
			overflow: hidden;
			.ipt-item{
				float: left;
				margin-right: 15px;
				.title{
					height: 40px;
					padding: 10px 0;
				}
				.btn{
					width: 100px;
					height: 32px;
					line-height: 30px;
					text-align: center;
					background: #3ca0ec;
					border-radius: 3px;
					cursor: pointer;
					color: #fff;
				}
			}
		}
		.time-warrp{
			margin-top: 20px;
			font-size: 0;
			.time-title{
				display: inline-block;
				padding: 0 15px 0 0;
				height: 38px;
				line-height: 38px;
				font-size: 14px;
			}
			.time-btn{
				vertical-align: top;
				display: inline-block;
				padding: 0 15px;
				height: 38px;
				line-height: 38px;
				margin-left: -1px;
				border:1px solid #d0d1d5;
				font-size: 14px;
				cursor: pointer;
			}
			.time-active{
				color:@activeColor;
			}
		}
		.content{
			margin-top: 20px;
			border:1px solid #d0d1d5;
			.order-by{
				padding:15px 20px;
				background: #f4f5f9;
				font-size: 0;
				border-bottom:1px solid #d0d1d5;
				.order-item{
					display: inline-block;
					padding: 4px 10px;
					font-size: 14px;
					border:1px solid #d2d3d7;
					margin-left: -1px;
					cursor: pointer;
				}
				.active{
					background: #3ca0ec;
					color: #fff
				}
			}
			.down-warrp{
				overflow: hidden;
				padding:15px 20px;
				background: #f4f5f9;
				border-bottom:1px solid #d0d1d5;
				.left-btn{
					float: left;
					width: 100px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background: #e7e7eb;
					font-size: 14px;
					border-radius: 3px;
					cursor: pointer;
				}
				.lactive{
					background:#3ca0ec;
					color: #fff;
				}
				.right-btn{
					float: right;
					line-height: 30px;
					font-size: 14px;
					color: #7b93b0;
				}
			}
			.op-btn{
				color:#ccc;
				cursor: pointer;
			}
			.goods-info{
				display: flex;
				margin-bottom: 10px;
				.buy-img{
					overflow: hidden;
					width: 80px;
					height: 80px;
				}
				.info-name{
					width: 100px;
				}
				.info-desc{
					flex:1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 20px;
				}
			}

		}
		.order-detail{
			position: relative;
			.title{
				margin-top: 20px;
				margin-bottom: 20px;
				line-height: 44px;
				border-bottom: 1px solid #ccc;
			}
			.goods-info{
				width: 100%;
				display: flex;
				.goods-img{
					overflow: hidden;
					width: 150px;
					height: 150px;
				}
				.buy-img{
					overflow: hidden;
					width: 80px;
					height: 80px;
				}
				.info-desc{
					flex:1;
					margin-left: 20px;
				}
			}
			.fahuo-btn{
				position: absolute;
				right: 20px;
				top: 30px;
			}
		}
	}

</style>